{% extends "layout.html" %}
{% block header %}
    <meta name="keywords" content="{{ post.keyword }}" />
    <meta name="description" content="{{ post.description() }}" />
{% endblock %}
{% block title %}
    {{ post.title }}
{% endblock %}
{% block style %}
    <style>
    .comment{
        width:100%;
        padding:5px 5px 0px 5px;
        border-bottom:1px solid #efefef;
        color: #333333;
    }
    
    .comment .title{
        color: #222222;
    }
    </style>
{% endblock %}
{% block body %}

    <div style="text-align:center">
        <h1>{{ post.title }}</h1>
    </div>
    <div style="text-align:center;">
        <p><small>日期：{{ post.create_time | dateformat }} 阅读：{{ post.read_count }}&nbsp;&nbsp;评论：{{ post.comment_count }}</small></p>
    </div>
    <div data-scroll-reveal="enter from the bottom" style="color:#333333;">
        {{ post.content | safe }}
    </div>
    <hr/>
    <div class="alert alert-info" role="alert" data-scroll-reveal="enter from the bottom">
        从我的世界路过
    </div>
    {% if not g.user.is_authenticated %}
    <div data-scroll-reveal="enter from the bottom">
        <div class="form-group">
            <input type="text" class="form-control" id="email" placeholder="尊姓大名">
        </div>
        <div class="form-group">
            <textarea class="form-control" id="body" rows="5" placeholder="放松心情，闲言碎语随心说"></textarea>
        </div>
        <div class="form-group text-right">
            <button class="btn btn-primary" onclick="onComment({{ post.id }})">
                <span class="oi" data-glyph="check" title="确定" aria-hidden="true"></span>&nbsp;提交
            </button>
        </div>
    </div>
    {% endif %}
    <div id="comments" data-scroll-reveal="enter from the bottom">
        {% for c in post.comments %}
        <dl class="comment" style="border-bottom:{{ loop.last }}" id="c{{ c.id }}">
            <dt class="title">
                {{ c.email }} <small>{{c.create_time | dateformat}}</small>
            </dt>
            <dd>
                {{ c.body }}
                {% if g.user.is_authenticated %}
                    <div class="float-right">
                    <button class="btn btn-primary btn-sm" onclick="onPublish({{ post.id }})">
                        <span class="oi" data-glyph="cloud-upload" title="发布" aria-hidden="true"></span>&nbsp;发布
                    </button>
                    <button class="btn btn-danger btn-sm" onclick="onDelete({{ post.id }},{{ c.id }})">
                        <span class="oi" data-glyph="delete" title="删除" aria-hidden="true"></span>&nbsp;删除
                    </button>
                    </div>
                {% endif %}
            </dd>
        </dl>
        {% endfor %}
    </div>
{% endblock %}

{% block qrcode %}
    <img src='{{ url_for("qr", pid=post.id) }}' width="100%">
{% endblock %}

{% block footer %}
    <script>
    function onComment(id){
        dat = {'email':$('#email').val(), 'body': $('#body').val()}
        $.ajax({url:'/api/post/' + id + '/comment', data:dat, type:'POST'})
            .done(function(result){
                $('#email').val('');
                $('#body').val('');
            })
            .fail(function(){
                alert('failed')
            })
    }

    function onDelete(pid, id){
        $.ajax({url: '/api/post/' + pid + '/comment/' + id, type: 'DELETE'})
            .done(function(result){
                if(result.success === true) {
                    window.location.reload();
                }
            })
            .fail(function(){
                alert('Failed');
            })
    }
    </script>
{% endblock %}
